<template>
  <div class="assessment-detail-container">
    <Header />
    <div class="assessment-detail-content">
      <div class="assessment-detail-box">
        <!-- 返回按钮 -->
        <div class="back-button">
          <el-button @click="goBack" type="primary" plain>
            <el-icon><ArrowLeft /></el-icon>
            返回
          </el-button>
        </div>

        <!-- 测评介绍 -->
        <div class="assessment-intro">
          <h1>{{ assessmentDetail.title }}</h1>
          <div class="assessment-meta">
            <span>
              <el-icon><Timer /></el-icon>
              预计用时：{{ assessmentDetail.duration }}分钟
            </span>
            <span>
              <el-icon><Document /></el-icon>
              题目数量：{{ assessmentDetail.questionCount }}题
            </span>
          </div>
          <div class="assessment-desc">
            <h3>测评说明：</h3>
            <p>{{ assessmentDetail.description }}</p>
          </div>
          <div class="assessment-notice">
            <h3>注意事项：</h3>
            <ul>
              <li v-for="(notice, index) in assessmentDetail.notices" :key="index">
                {{ notice }}
              </li>
            </ul>
          </div>
        </div>

        <!-- 开始测评按钮 -->
        <div class="start-button">
          <el-button type="primary" size="large" @click="startTest">
            开始测评
          </el-button>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup lang="ts">
import { ref, defineComponent, Component } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import Header from '../../components/header.vue'
import Footer from '../../components/footer.vue'
import { ArrowLeft, Timer, Document } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const assessmentId = route.params.id

// 返回方法
const goBack = () => {
  router.back()
}

// 开始测试方法
const startTest = () => {
  router.push(`/assessment/${assessmentId}/test`)
}

// 模拟测评详情数据
const assessmentDetail = ref({
  id: assessmentId,
  title: 'SCL-90症状自评量表',
  duration: 20,
  questionCount: 90,
  description: 'SCL-90是一份用于了解心理健康状况的自评量表，包含90个项目，涵盖了躯体化、强迫症状、人际关系敏感、抑郁、焦虑、敌对、恐怖、偏执、精神病性等9个维度。',
  notices: [
    '请在安静、不受打扰的环境下完成测评',
    '根据自己最近一周的实际情况如实填写',
    '测评过程中请保持专注，避免中途中断',
    '本测评结果仅供参考，如有疑虑请咨询专业心理医生'
  ]
})

// 声明组件类型
const ElIcon = defineComponent({
  name: 'ElIcon'
}) as Component
</script>

<style scoped>
.assessment-detail-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.assessment-detail-content {
  flex: 1;
  padding: 84px 20px 40px;
}

.assessment-detail-box {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

.back-button {
  margin-bottom: 30px;
}

.assessment-intro h1 {
  font-size: 28px;
  color: #2c3e50;
  margin-bottom: 20px;
  text-align: center;
}

.assessment-meta {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 30px;
  color: #666;
}

.assessment-meta span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.assessment-desc,
.assessment-notice {
  margin-bottom: 30px;
}

.assessment-desc h3,
.assessment-notice h3 {
  font-size: 18px;
  color: #2c3e50;
  margin-bottom: 15px;
}

.assessment-desc p {
  color: #666;
  line-height: 1.8;
}

.assessment-notice ul {
  color: #666;
  line-height: 1.8;
  padding-left: 20px;
}

.assessment-notice li {
  margin-bottom: 10px;
}

.start-button {
  text-align: center;
  margin-top: 40px;
}

.start-button .el-button {
  padding: 15px 40px;
  font-size: 16px;
}
</style> 